import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_axrjc/datasource/network/api/LightApi.dart';
import 'package:flutter_axrjc/widget/custom_text_field.dart';
import 'package:get/get.dart';

import 'logic.dart';

class EditArticlePage extends StatelessWidget {
  const EditArticlePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<EditArticleLogic>();
    final state = Get.find<EditArticleLogic>().state;

    return Scaffold(
      backgroundColor: const Color(0xffF3F6F9),
      appBar: AppBar(
        backgroundColor: Colors.white,
        foregroundColor: Colors.black,
        titleSpacing: -10,
        elevation: 0,
        centerTitle: true,
        title: const Text(
          "修改护眼知识文章",
          style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
        ),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Obx(() {
                return CustomTextField(
                  value: state.title.value,
                  onChanged: (t) {
                    state.title.value = t;
                  },
                  inputDecoration: const InputDecoration(hintText: '请输入标题'),
                );
              }),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: InkWell(
                  onTap: logic.selectHomePic,
                  child: Container(
                    height: 200,
                    width: double.infinity,
                    decoration: BoxDecoration(
                        color: Colors.white,
                        boxShadow: [
                          BoxShadow(
                              color: Colors.grey.withAlpha(20), blurRadius: 5)
                        ],
                        borderRadius: BorderRadius.circular(5)),
                    child: Obx(() {
                      return state.homePic.value.isNotEmpty
                          ? Stack(
                              children: [
                                Positioned.fill(
                                  child: state.homePic.value.startsWith("http")
                                      ? Image.network(
                                          state.homePic.value,
                                          fit: BoxFit.cover,
                                        )
                                      : Image.file(
                                          File(state.homePic.value),
                                          fit: BoxFit.cover,
                                        ),
                                ),
                                Positioned(
                                  top: 0,
                                  right: 0,
                                  child: InkWell(
                                    onTap: () {
                                      // state.homePic.value = '';
                                    },
                                    child: const Padding(
                                      padding: EdgeInsets.all(8.0),
                                      child: Icon(
                                        Icons.close,
                                        color: Colors.red,
                                      ),
                                    ),
                                  ),
                                )
                              ],
                            )
                          : const Center(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Icon(
                                    Icons.add,
                                    color: Colors.grey,
                                  ),
                                  Text(
                                    "文章首图",
                                    style: TextStyle(color: Colors.grey),
                                  )
                                ],
                              ),
                            );
                    }),
                  ),
                ),
              ),
              Obx(() {
                return CustomTextField(
                  value: state.content.value,
                  onChanged: (t) {
                    state.content.value = t;
                  },
                  inputDecoration: const InputDecoration(
                    hintText: '请输入内容...',
                    border: InputBorder.none,
                  ),
                  maxLines: 10,
                );
              }),
              Obx(() {
                return GridView.builder(
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 3,
                            crossAxisSpacing: 5,
                            mainAxisSpacing: 5,
                            childAspectRatio: 1),
                    itemCount: state.imgList.length,
                    itemBuilder: (BuildContext context, int index) {
                      var bean = state.imgList[index];
                      if (bean.pathOrUrl == "add") {
                        return GestureDetector(
                          onTap: logic.addImg,
                          child: Container(
                            decoration: BoxDecoration(
                                color: Colors.white,
                                boxShadow: [
                                  BoxShadow(
                                      color: Colors.grey.withAlpha(20),
                                      blurRadius: 5)
                                ],
                                borderRadius: BorderRadius.circular(5)),
                            child: const Icon(
                              Icons.add,
                              color: Colors.grey,
                            ),
                          ),
                        );
                      } else {
                        return Stack(
                          children: [
                            Container(
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  boxShadow: [
                                    BoxShadow(
                                        color: Colors.grey.withAlpha(20),
                                        blurRadius: 5)
                                  ],
                                  borderRadius: BorderRadius.circular(5),
                                  image: DecorationImage(
                                      image: bean.isLocal
                                          ? Image.file(File(bean.pathOrUrl))
                                              .image
                                          : Image.network(bean.pathOrUrl).image,
                                      fit: BoxFit.cover)),
                            ),
                            Positioned(
                                top: 0,
                                right: 0,
                                child: GestureDetector(
                                  onTap: () async {
                                    if (bean.isLocal) {
                                      state.imgList.removeWhere((element) =>
                                          element.isLocal &&
                                          element.pathOrUrl == bean.pathOrUrl);
                                    } else {
                                      await LightApi.deleteImgByFileNo(
                                          bean.ifUploadedFileNo);
                                      state.imgList.removeWhere((element) =>
                                          !element.isLocal &&
                                          element.pathOrUrl == bean.pathOrUrl);
                                    }
                                  },
                                  child: const Padding(
                                    padding: EdgeInsets.all(8.0),
                                    child: Icon(
                                      Icons.close,
                                      color: Colors.red,
                                    ),
                                  ),
                                ))
                          ],
                        );
                      }
                    });
              }),
              const SizedBox(
                height: 10,
              ),
              InkWell(
                onTap: logic.change,
                child: Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                  child: Container(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 10, vertical: 10),
                      decoration: BoxDecoration(
                          color: Colors.orange,
                          borderRadius: BorderRadius.circular(10)),
                      child: const Center(
                          child: Text(
                        "提交修改",
                        style: TextStyle(color: Colors.white),
                      ))),
                ),
              ),
              const SizedBox(
                height: 40,
              )
            ],
          ),
        ),
      ),
    );
  }
}
